import { View, Image } from "@tarojs/components";
import { icons } from "@utils/index";
import WeappLogin from "./components/WeappLogin";
import PhoneLogin from "./components/PhoneLogin";
import { useState, useMemo } from "react";

const Login = () => {
  const [loginType, setLoginType] = useState("weapp");
  const loginHtml = useMemo(() => {
    return {
      weapp: (
        <WeappLogin onChangeLoginType={setLoginType.bind(null, "phone")} />
      ),
      phone: (
        <PhoneLogin onChangeLoginType={setLoginType.bind(null, "weapp")} />
      ),
    }[loginType];
  }, [loginType]);
  return (
    <View className="bg-[#eee] h-screen w-full box-border pt-[100px]">
      <Image
        src={icons.logoIcon}
        className="w-[150px] h-[150px] block m-auto mb-[30px] rounded-[80px]"
      />
      {loginHtml}
    </View>
  );
};

export default Login;
